{extends file="../_base.tpl"}

{block name='title'} pk {/block}
{block name='description'} pk {/block}
{block name='keywords'} pk {/block}

{block name="css-page"}
<link rel="stylesheet" href="{$Yii->params['STATIC_PATH']}/css/reveal.css?v={$smarty.const.STATIC_VERSION}" />
<link rel="stylesheet" href="{$Yii->params['STATIC_PATH']}/css/idialog.css?v={$smarty.const.STATIC_VERSION}" />
<link rel="stylesheet" href="{$Yii->params['STATIC_PATH']}/css/pk.css?v={$smarty.const.STATIC_VERSION}" />
{/block}
{block name="js-common"}
<script src="{$Yii->params['JS_PATH']}/template.js" type="text/javascript"></script>
<!--
<script src="{$Yii->params['JS_PATH']}/raphael.js" type="text/javascript"></script>
<script src="{$Yii->params['JS_PATH']}/raphael.popup.js" type="text/javascript"></script>
-->
{/block}
{block name="js-page"}
<script type="text/javascript">
var itemJson = {$jsonPictures};
var token = '{$token}';
</script>
<script src="{$Yii->params['JS_PATH']}/pk.js?v=2" type="text/javascript"></script>
<script type="text/javascript" src="{$Yii->params['JS_PATH']}/jquery.reveal.js"></script>
<script type="text/javascript" src="{$Yii->params['JS_PATH']}/artDialog.min.js?skin=idialog"></script>
<script type="text/javascript" src="{$Yii->params['JS_PATH']}/artDialog.plugins.min.js"></script>
{/block}

{block name="content"}


<style type="text/css">
#headCanvas{
	position: relative;
	top:0;
	left: 0;
	height: 50px;
	width: 100%;
}
</style>
<!--
<div id="headCanvas" class="bgc1"></div>
-->

<div class="pk_main clearfix" id="pk_main">
	<div class="mt15 pk_item fl" hover-class="hover" style="left:30px;">
	    <div class="img_wrap bgc2" role="pk-img-wrap">
	        <img id="pk1" width="400" src="{$pictures[1][0]['pic_show_url']}" data-pk="{$pictures[0][0]['id']}" data-group="0" alt="">
	    </div>
	</div>

	<div class="mt15 pk_item fr" hover-class="hover" style="left:530px;">
	    <div class="img_wrap bgc3" role="pk-img-wrap">
	        <img id="pk2" width="400" src="{$pictures[1][1]['pic_show_url']}" data-pk="{$pictures[0][1]['id']}" data-group="0" alt="">
	    </div>
	</div>
</div>

<script type="text/template" id="img_tpl">
<div class="mt15 pk_item" hover-class="hover" style=" position:absolute; left:!@left@px;">
    <div class="img_wrap bgc!@colorIndex@" role="pk-img-wrap">
        <img id="pk2" width="!@width@" src="!@pic_show_url@" data-pk="!@id@" data-group="!@group@" alt="">
    </div>
</div>
</script>

<style type="text/css">
.card{
	margin:10px;
	padding:5px;
	border:1px solid #AAA;
	border-radius:5px;
	box-shadow:0 1px 3px #AAA;
}
.card-img{
	padding:5px;
}
.card-text{
	text-align:center;
}
.big-font{
	font-size:24px;
}
.clickable{
	cursor:pointer;
}

</style>

{*
<div id="prize_zone" class="reveal-modal">
	<a class="close-reveal-modal">&#215;</a>
	<ul class="clearfix">
		<li class="fl">
			<div class="card clickable">
				<div class="card-img">
					<img src="http://up.ekoooo.com/uploads2/allimg/100103/9_100103070800_1.jpg" width="200">
				</div>
				<div class="card-text big-font">
					100元
				</div>
			</div>
		</li>
		<li class="fl">
			<div class="card clickable nextRound">
				<div class="card-img">
					<img src="/static/img/go_on.png" width="200">
				</div>
				<div class="card-text big-font">
					我要拿大奖
				</div>
			</div>
		</li>
	</ul>
</div>
<script type="text/javascript">
$(function(){
	$('#prize_zone').reveal({
		closeonbackgroundclick: false
	});

});
</script>
*}



<script type="text/template" id="prize_tpl">
	<div id="prize_zone" class="reveal-modal">
		<a class="close-reveal-modal nextRound">&#215;</a>
		<ul class="clearfix">
			@@each prizes as prize@  
			<li class="fl">
				<div class="card clickable" data-prize-id="!@prize.id@">
					<div class="card-img">
						<img src="!@prize.img@" width="200">
					</div>
					<div class="card-text big-font">
						!@prize.name@
					</div>
				</div>
			</li>
			@@/each@

			<li class="fl">
				<div class="card clickable nextRound">
					<div class="card-img">
						<img src="/static/img/go_on.png" width="200">
					</div>
					<div class="card-text big-font">
						我要拿大奖
					</div>
				</div>
			</li>
		</ul>
	</div>
</script>

<script type="text/template" id="confirm_tpl">
	<div class="reveal-modal">
		<a class="close-reveal-modal nextRound">&#215;</a>
		<div class="big-font">
			!@content@
		</div>
		
	</div>
</script>


{/block}